<template>
  <div class="msg-detail-wrap">

    <div class="msg-detail-title-box">
      <span class="msg-title">{{infoTitle}}</span>
      <span class="msg-time">{{infoTime}}</span>
    </div>

    <div class="msg-warn-box" v-if="infoTitle.indexOf('借支申请') != -1  || infoTitle.indexOf('离职申请') != -1
    || infoTitle.indexOf('日日薪资格申请') != -1 || infoTitle.indexOf('员工报名') != -1 ">{{infoBrief}}
    </div>
    <div class="msg-warn-box" v-else>{{infoDetail}}</div>

    <div class="msg-content-con" v-if="infoTitle.indexOf('借支申请') != -1  || infoTitle.indexOf('离职申请') != -1
    || infoTitle.indexOf('日日薪资格申请') != -1 || infoTitle.indexOf('员工报名') != -1 ">
      <div class="msg-content-box">
        <div class="msg-detail-title">{{infoCaption}}</div>
        <div class="msg-content" v-html="infoDetail"></div>
      </div>

      <div class="msg-btn-box" @click="callPhone">
        <img src="./phone.png" class="pic-phone"/>
        <span class="msg-btn-text">联系员工</span>
      </div>
    </div>


  </div>
</template>

<script>
  import {formatDate} from "../../../config/util";
  import {baseUrl} from "../../../config/env";

  export default {
    data() {
      return {
        infoTitle: "",
        infoDetail: "",
        infoTime: "",
        infoId: this.$route.query.id,
        infoCaption: "",
        infoBrief: "",
        userTel: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.queryInfoDetail();
    },
    methods: {
      queryInfoDetail() {
        this.axios.get(baseUrl + "/info/query_infodetail?sgin=" + this.userSign + "&infoId=" + this.infoId).then((res) => {
          let infoObj = res.data;
          if (infoObj.code == 0 && infoObj.data != null) {
            this.infoTitle = infoObj.data.informationTitle;
            this.infoDetail = infoObj.data.informationDetails;
            this.infoTime = formatDate(new Date(infoObj.data.time), 'yyyy-MM-dd hh:mm');
            this.infoCaption = this.changeInfoCaption(this.infoTitle);
            this.infoBrief = infoObj.data.infoContent;
            this.userTel = infoObj.data.userTel;
          } else {
            this.$vux.toast.text(infoObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      changeInfoCaption(infoTitle) {
        if (infoTitle.indexOf("借支申请") != -1) {
          return "借支详情";
        } else if (infoTitle.indexOf("离职申请") != -1) {
          return "离职详情";
        } else if (infoTitle.indexOf("日日薪资格申请") != -1) {
          return "申请详情";
        } else if (infoTitle.indexOf("员工报名") != -1) {
          return "报名详情";
        }
      },
      callPhone() {
        window.location.href = 'tel://' + this.userTel;
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .msg-detail-wrap
    wh(100%, 100%)
    .msg-detail-title-box
      display: flex
      flex-direction: column
      wh(96.8%, 1.893rem)
      margin-left: 3.2%
      border-bottom: 0.027rem solid #EBEBEB
      .msg-title
        padding-top: 0.467rem
        padding-bottom: 0.267rem
        size-color(0.453rem, rgba(51, 51, 51, 1))
        font-weight: 500
      .msg-time
        size-color(0.347rem, rgba(153, 153, 153, 1))
    .msg-warn-box
      padding-top: 0.48rem
      padding-left: 0.32rem
      padding-bottom: 0.693rem
      size-color(0.4rem, rgba(102, 102, 102, 1))
      padding-right: 0.32rem
      line-height: 0.48rem
      text-indent: 0.72rem
    .msg-content-box
      wh(100%, auto)
      background: rgba(245, 248, 250, 1)
      border-radius: 0.053rem
      display: flex
      flex-direction: column
      margin-bottom: 0.96rem
      .msg-detail-title
        margin-top: 0.267rem
        margin-bottom: 0.467rem
        text-align: center
        line-height: 0.64rem
        wh(2.32rem, 0.64rem)
        background: rgba(60, 175, 255, 1)
        border-top-right-radius 0.32rem
        border-bottom-right-radius 0.32rem
        size-color(0.4rem, rgba(255, 255, 255, 1))
        font-weight: 500
      .msg-content
        size-color(0.4rem, rgba(102, 102, 102, 1))
        padding-left: 0.32rem
      .msg-content >>> p
        size-color(0.4rem, rgba(102, 102, 102, 1))
        padding-bottom: 0.32rem
        line-height: 0.48rem
    .msg-btn-box
      fj(center, center)
      wh(9.04rem, 1.28rem)
      background: rgba(60, 175, 255, 1)
      border-radius: 0.16rem
      margin: 0 auto
      .pic-phone
        margin-right: 0.28rem
        wh(0.48rem, 0.48rem)
      .msg-btn-text
        size-color(0.453rem, rgba(255, 255, 255, 1))
</style>
